<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/assets/css/bootstrap.css">
    <style>
        .table th, .table tr, .table td {
            border: 1px solid #CCCCCC !important;
        }
        .table tr, .table td {
            height: 80px;
        }
        .table th {
            line-height: 80px !important;
            padding: 0 !important;
            text-align: center;
        }
    </style>
    <title>报名中心 - 选修课报名系统</title>
</head>
<body class="col-lg-10 col-md-10 col-xs-10 col-lg-offset-1 col-md-offset-1 col-xs-offset-1">
    <nav class="navbar navbar-inverse ">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="/">选修课报名系统</a>
            </div>

            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="/">选课中心</a></li>
                    <li><a href="/myCourse">我的选课</a></li>
                    <li><a href="/changePassword">修改密码</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <li><a>欢迎你，<%= sname %> (<%= sid %>)</a></li>
                    <li><a href="/exitLogin">退出登录</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <table class="table table-bordered text-center">
        <tr>
            <th style="width: 80px" class="text-center">课程编号</th>
            <th style="width: 140px" class="text-center">课程名</th>
            <th style="width: 80px" class="text-center">上课时间</th>
            <th style="width: 80px" class="text-center">课程人数</th>
            <th style="width: 80px" class="text-center">可报年级</th>
            <th style="width: 80px" class="text-center">上课老师</th>
            <th style="width: 80px">课程简介</th>
            <th style="width: 80px" class="text-center">操作</th>
        </tr>
        <tbody id="tbody">

        </tbody>
    </table>

    <nav aria-label="Page navigation">
        <ul class="pagination">
            <!--<li>-->
                <!--<a href="javascript:;" aria-label="Previous">-->
                    <!--<span aria-hidden="true">&laquo;</span>-->
                <!--</a>-->
            <!--</li>-->
            <!--<li class="last_page">-->
                <!--<a href="javascript:;" aria-label="Next">-->
                    <!--<span aria-hidden="true">&raquo;</span>-->
                <!--</a>-->
            <!--</li>-->
        </ul>
    </nav>

</body>
</html>

<script src="/assets/js/jquery-1.8.3.min.js"></script>
<script>
    $(function () {
        var flag = 0;
        loadCourse()
        function loadCourse (page = 1) {
            $.get('/weatherCanSignUp', function ({result}) {
                $.get('/course', { page }, function ({rows, total}) {
                    // 给表格每一行添加数据
                    var tr = ''
                    rows.forEach(function (item) {
                        tr += `
                            <tr>
                                <td>${item.cid}</td>
                                <td>${item.cname}</td>
                                <td>${item.dayofweek}</td>
                                <td>${item.number}</td>
                                <td>${item.allow}</td>
                                <td>${item.teacher}</td>
                                <td>${item.briefintro}</td>
                                <td><input type="button" class='btn' id='select_course${item.cid}' data-cid='${item.cid}' value='${result[item.cid]}' /></td>
                            </tr>
                        `;
                    })
                    $('#tbody').empty().append(tr);

                    //判断按钮选课状态
                    for (var key in result) {
                        if (result[key] === '可选') {
                            $('#select_course' + key).addClass('btn-success')
                        }else if (result[key] === '已选') {
                            $('#select_course' + key).prop('disabled', true)
                            $('#select_course' + key).after(`<input type="button" class='btn btn-danger' data-cid='${key}' value='退选' />`)
                        }
                        else {
                            $('#select_course' + key).prop('disabled', true)
                        }
                    }
                    // 生成分页按钮
                    //如果flag = 0，就表示第一次加载，则生成分页
                    if (flag === 0) {
                        $('.pagination').empty();
                        for (var i = 0; i < total; i ++) {
                            $('.pagination').append(`
                                <li><a href="javescript:;" class="jumpPage" data-pagenum=${i + 1}>${i + 1}</a></li>
                            `)
                        }
                        $('.pagination').children().eq(0).addClass('active')
                        flag = 1
                    }

                })
            })
        }

        //选课逻辑
        $('.table').delegate('.btn', 'click', function () {
            if (confirm('你确实要选这门课吗？')) {
                $.ajax({
                    url: '/selectCourse',
                    type: 'post',
                    data: {
                        cid: $(this).data('cid')
                    },
                    success(data) {
                        if (data.result === 1) {
                            alert('选课成功')
                        } else if (data.result === 0) {
                            alert('退报成功')
                        }
                        window.location.reload()
                    }
                })
            }
        })

        $('.pagination').delegate('.jumpPage', 'click', function () {
            $(this).parent('li').addClass('active').siblings('li').removeClass('active')
            loadCourse($(this).data('pagenum'))  //传入某个页码
        })

    })
</script>